---
title: कस्टम अवतार
description: अपने ऐप के उपयोगकर्ता अवतार को कस्टमाइज़ करना
---

# कस्टम अवतार

## अपने ऐप के उपयोगकर्ता अवतार को कस्टमाइज़ करना

डिफ़ॉल्ट रूप से, हम उपयोगकर्ताओं के लिए एक अवतार प्रदान करते हैं यदि उनका ENS छवि सेट नहीं है, लेकिन आप अपने स्वयं के अवतार घटक प्रदान करके इसे कस्टमाइज़ कर सकते हैं। यदि TypeScript का उपयोग कर रहे हैं तो आप `AvatarComponent` प्रकार आयात कर सकते हैं:

```tsx
import {
  RainbowKitProvider,
  AvatarComponent,
} from '@rainbow-me/rainbowkit';
import { generateColorFromAddress } from './utils';

const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
  const color = generateColorFromAddress(address);
  return ensImage ? (
    <img
      src={ensImage}
      width={size}
      height={size}
      style={{ borderRadius: 999 }}
    />
  ) : (
    <div
      style={{
        backgroundColor: color,
        borderRadius: 999,
        height: size,
        width: size,
      }}
    >
      :^)
    </div>
  );
};

const App = () => {
  return (
    <RainbowKitProvider avatar={CustomAvatar} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};
```

`AvatarComponent` जो `avatar` प्रॉप को पास किया गया है, उसका प्रॉप प्रकार निम्नलिखित है: `<{ पता: स्ट्रिंग; ensImage?: स्ट्रिंग | null; आकार: संख्या;}>`
